<!-- 添加删除商品控件 -->
<template>
 <div class="cartcontrol" @click.stop>
    <transition>
        <i class="icon-remove_circle_outline" v-show="$store.getters.FoodCount[food.id]"
        @click="removeitem(food.id)"></i>
    </transition>
    <div class="count">
      <span v-if="$store.getters.FoodCount[food.id]">{{ $store.getters.FoodCount[food.id] }}</span>
    </div>
    <i class="icon-add_circle" @click="additem(food)"></i>
 </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    additem(f) {
      let addFood = {
        id: f.id,
        name: f.name,
        price: f.price,
        count: 1
      };
      this.$store.commit("increase", addFood);
      //    Vue.set()
      //   设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，
      //   同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
      //   vue中向观测对象添加一个不存在的属性时，需要用Vue.set() 否则检测不到
      // if (!this.food.count) {
      //   Vue.set(this.food, "count", 1);
      // } else {
      //   this.food.count++;
      // }
    },
    removeitem(id) {
      this.$store.commit("reduce", id);
    }
  },
  props: ["food"]
};
</script>
<style lang='less' scoped>
@import "../../common/css/common.less";
.cartcontrol {
  .count {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 24px;
    .font-style(10px,24px);
    color: rgb(147, 153, 159);
  }
  .icon-add_circle,
  .icon-remove_circle_outline {
    display: inline-block;
    .font-style(24px,24px);
    color: rgb(0, 160, 220);
    transition: all 0.6s linear;
    &.v-enter,
    &.v-leave-to {
      opacity: 0;
      transform: translate3d(48px, 0, 0) rotate(360deg);
    }
  }
}
</style>